<template>
	<el-container>
		<el-aside width="200px">
      <h3 style="margin-top:50px;margin-left: 30px;">数据库表</h3>
      <el-input
        placeholder="输入关键字进行过滤"
        size="small"
        v-model="filterText">
       </el-input>
      <el-tree :data="dbData"
      :filter-node-method="filterNode"
      ref="tree"
      icon-class="el-icon-coin"
      @node-click="nodeClick"
       />
		</el-aside>
		<el-container>
			<el-header > 
				<el-button type="primary" icon="el-icon-plus" @click="linkToMysql()" size="small">连接</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="Connect()" size="small">查询</el-button>
			</el-header>
			<el-main>
        {{valueData}}
				<!-- <el-table :data="valueData" border :max-height="700" >
			        <el-table-column prop="table_name" label="表" width="190"></el-table-column>
			   </el-table> -->
         <Connect 
            v-if="dialog.connectDialog"
            dialogVisible="dialog.connectDialog"
          />
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import Connect from './ConnectDialog'
const mysql= require('mysql2')
  export default {
    name: 'main-page',
    componments:{
      Connect
    },
	data () {
    return {
      filterText:null,
      databaseSql:'show databases',
      tableSql: 'select table_name,table_comment from information_schema.tables where table_schema=',
      valueSql: 'select * from ',
      connection: undefined,
      tableData: [], 
      dbData:[],
      valueData:[],
      dialog:{
        connectDialog:false
      }
    }
  },
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
  },
  methods: {
    Connect(){
      this.dialog.connectDialog=true
    },
    // 数据表结点被点击时
    nodeClick(a,b,c){
      // a.label为点击的数据表名
      this.query(a.label)
    },
     filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      query (tableName) { // 查询库中所有的表
      let $this = this
      console.log( $this.valueSql + "'" + tableName + "'")
      this.connection.query(
        $this.valueSql + tableName,
        function (err, results, fields) {
          if (err) {
            console.log(err)
          }
          $this.valueData = results
        }
      )
    },
    linkToMysql () { // 连接到mysql
      let user = {
        host: 'localhost',
        database: '',
        user: 'root',
        password: '861153',
        port: 3307
      }
      // 连接到数据库
      this.connection = mysql.createPool(user)
      let $this = this
      // 重置树
      $this.dbData=[]
      // 查询数据库所有表
       $this.connection.query(
        this.databaseSql,
        function (err, results, fields) {
          if (err) {
            console.log(err)
          }
          results.forEach(element=>{
            // $this.dbData.push({label:element.Database})
            $this.connection.query(
             $this.tableSql+ "'" + element.Database+ "'",
            function (err, rows, fields) {
              if (err) {
                console.log(err)
              }
              let obj={
                  label:element.Database,
                  children:[]
                }    
              rows.forEach(element1=>{
                  let label={
                    label:element1.table_name,
                  }
                  obj.children.push(label)           
              })
             $this.dbData.push(obj)
            }
          )

          })
         
        }
      )

    }
  }
  }
</script>

<style>
   html,body,#app,.el-container{
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
         /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        height: 100%;
    }
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
</style>